import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);


import page from "./modules/page";
import layout from "./modules/layout";
import seniorBoxList from "./state/seniorBoxList";
import componentList from "./state/componentList";

import store_dragenter from "./mutations/store_dragenter";
import store_dragleave from "./mutations/store_dragleave";
import store_ondrop from "./mutations/store_ondrop";
import store_ondragstart from "./mutations/store_ondragstart";
import aimAttrsChange from "./mutations/aimAttrsChange";
import checkDomAttrs from "./mutations/checkDomAttrs";
import mouseoverColorChange from "./mutations/mouseoverColorChange";
import changeJudgeColorDom from "./mutations/changeJudgeColorDom";
import controlColBoxDialog from "./mutations/controlColBoxDialog";
import controlSeniorBoxDialog from "./mutations/controlSeniorBoxDialog";
import deletePage from "./mutations/deletePage";
import createPage from "./mutations/createPage";
import deleteComponent from "./mutations/deleteComponent";
import deedStackChange from "./mutations/deedStackChange";
import packPage from "./mutations/packPage";
import loadPageData from "./mutations/loadPageData";
import uploadImage from "./mutations/uploadImage";
import storeData from "./mutations/storeData";

const store = new Vuex.Store({
  strict: true, //记得删除
  state: {
    aimDom: {}, //目标DOM节点
    aimPath: [], //目标路径
    aimAttrs: {}, //目标属性
    aimBox: null, //目标容器
    aimXY: null, //鼠标与组件的偏移
    componentList,
    seniorBoxList,
    //为了可以显示margin...
    colorDomStyle: {
      width: "", //width-content
      height: "",
      top: "",
      left: "",
      padding: "",
      border: "",
      margin: "",
    },
    judgeColorDom: false,
    domStack: [], //存储栈
    domStackNum: -1, //存储栈控制下标
  },
  modules: {
    page,
    layout,
  },
  mutations: {
    //网页编辑区进入模块
    store_dragenter,
    //网页编辑区离开模块
    store_dragleave,
    //网页编辑区有模块放下
    store_ondrop,
    //模块开始移动
    store_ondragstart,
    //目标模板属性变化
    aimAttrsChange,
    //点击网页编辑区模块触发
    checkDomAttrs,
    //屏蔽层样式改变
    mouseoverColorChange,
    //点击后，生成或取消屏蔽层
    changeJudgeColorDom,
    //多列容器选择
    controlColBoxDialog,
    //高级容器选择
    controlSeniorBoxDialog,
    //删除页面
    deletePage,
    //新建页面
    createPage,
    //删除组件
    deleteComponent,
    //存储栈变更
    deedStackChange,
    //打包
    packPage,
    //加载图片
    uploadImage,
    //加载页面数据
    loadPageData,
    //保存页面数据
    storeData,
    //图片替换
    // replaceImage: (state) => {
    //   //对图片进行替换
    //   for (const key in state.imgList) {
    //     if (Object.hasOwnProperty.call(state.imgList, key)) {
    //       data = data.replace(
    //         state.imgList[key].blob,
    //         require(state.imgList[key].src)
    //       );
    //     }
    //   }
    // },
  },
});

export default store;
